<template>
  <div class="app-container">
    <el-row :gutter="20">
      <!--用户数据-->
      <el-col :span="24" :xs="24">
        <el-form :model="queryForm" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
          <el-form-item label="微信名称" prop="nickName">
            <el-input
              v-model="queryForm.nickName"
              placeholder="请输入微信名称"
              clearable
              size="small"
              style="width: 180px"
              @keyup.enter.native="handleQuery"
            />
          </el-form-item>
          <el-form-item label="状态" prop="status">
            <el-select
              v-model="queryForm.status"
              placeholder="请输入用户状态"
              clearable
              size="small"
              style="width: 180px"
            >
              <el-option
                v-for="item in statusOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="cyan" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
            <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
          </el-form-item>
        </el-form>

        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click=""
              v-has-perm="['weixin_wxUser:addTag']"
            >打标签
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="danger"
              icon="el-icon-delete"
              size="mini"
              @click=""
              v-has-perm="['weixin_wxUser:editTag']"
            >去除标签
            </el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button
              type="warning"
              icon="el-icon-refresh"
              size="mini"
              @click="handleSync"
              v-has-perm="['weixin_wxUser:sync']"
            >同步用户
            </el-button>
          </el-col>
          <right-toolbar :showSearch.sync="showSearch" @queryTable="handleQuery"></right-toolbar>
        </el-row>

        <el-table v-loading="loading" :header-cell-style="thStyleFun" :cell-style="cellStyleFun"
                  :data="userList" @selection-change="handleSelectionChange">
          <el-table-column type="selection" width="50"/>
          <el-table-column label="微信头像" type="upload" prop="headImgUrl" width="80px">
            <template slot-scope="scope">
              <img :src="scope.row.headImgUrl" alt="" class="table-img">
            </template>
          </el-table-column>
          <el-table-column label="微信名称" prop="nickName" width="160px" show-overflow-tooltip/>
          <el-table-column label="openId" prop="openId" width="260px" show-overflow-tooltip/>
          <el-table-column label="是否订阅" prop="subscribe" :formatter="subscribeFormat" width="80px">
            <template slot-scope="scope">
              <el-tag :type="scope.row.subscribe == 0 ? 'danger' : 'success'">{{ subscribeFormat(scope.row) }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column label="关注渠道" prop="subscribeScene" width="160" :formatter="subscribeSceneFormat"/>
          <el-table-column label="关注时间" prop="subscribeTime" width="160"/>
          <el-table-column label="性别" prop="sex" :formatter="sexFormat" width="70px"/>
          <el-table-column label="国家" prop="country" width="80px" show-overflow-tooltip/>
          <el-table-column label="省份" prop="province" width="80px" show-overflow-tooltip/>
          <el-table-column label="城市" prop="city" width="80px" show-overflow-tooltip/>
          <el-table-column label="状态" width="100px">
            <template slot-scope="scope">
              <el-switch
                v-model="scope.row.status"
                :active-value="0"
                :inactive-value="1"
                @change="handleStatusChange(scope.row)"></el-switch>
            </template>
          </el-table-column>
          <el-table-column label="创建时间" prop="createTime" width="160"/>
          <el-table-column label="操作" min-width="100px" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="detail"
                icon="el-icon-view"
                @click="handleUpdate(scope.row)"
                v-has-perm="['weixin_wxUser:detail']"
              >详情
              </el-button>
            </template>
          </el-table-column>
        </el-table>

        <pagination
          v-show="total>0"
          :total="total"
          :page.sync="queryForm.cursor"
          :limit.sync="queryForm.limit"
          @pagination="_getWxUser"
        />
      </el-col>
    </el-row>


    <!-- 添加或修改参数配置对话框 -->
    <el-dialog v-dialog-drag title="用户详情" :visible.sync="open" width="700px" append-to-body>
      <el-form ref="userForm" :model="form" label-width="80px" size="mini">
        <el-row>
          <el-col :span="12">
            <el-form-item label="头像" prop="headImgUrl">
              <img :src="form.headImgUrl"/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="openId" prop="openId">
              {{ form.openId }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户昵称" prop="nickName">
              {{ form.nickName }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户性别">
              {{ sexFormat(form) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="手机号码" prop="phone">
              {{ form.phone }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属国家" prop="country">
              {{ form.country }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属省份" prop="province">
              {{ form.province }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属城市" prop="city">
              {{ form.city }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="用户语言" prop="language">
              {{ form.language }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="应用类型" prop="appType">
              {{ appTypeFormat(form) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否订阅" prop="subscribe">
              {{ subscribeFormat(form) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关注渠道" prop="subscribeScene">
              {{ subscribeSceneFormat(form) }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关注时间" prop="subscribeTime">
              {{ form.subscribeTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="关注次数" prop="subscribeNum">
              {{ form.subscribeNum }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="取关时间" prop="cancelSubscribeTime">
              {{ form.cancelSubscribeTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="创建时间" prop="createTime">
              {{ form.createTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="更新时间" prop="updateTime">
              {{ form.updateTime }}
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="状态" prop="status">
              {{ statusFormat(form) }}
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item label="备注">
              <el-input v-model="form.remark" type="textarea"></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handleUpdateRemark"
                   v-has-perm="['weixin_wxUser:updateRemark']">修改备注
        </el-button>
        <el-button @click="open=false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {changeWxUserStatus, getWxUser, pageWxUser, syncWxUser, updateWxUserRemark} from "@/api/weixin/user";
import {cellStyleFun, thStyleFun} from "@/utils/common";

export default {
  name: "WxUser",
  data() {
    return {
      // 遮罩层
      loading: false,
      // 显示搜索条件
      showSearch: true,
      // 查询表单数据对象
      queryForm: {
        nickName: undefined,
        roleId: undefined,
        status: undefined,
        cursor: 1,
        limit: 20
      },
      // 总条数
      total: 0,
      userList: [],
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 表单
      form: {},
      open: false,
      // 状态
      statusOptions: [
        {value: 0, label: '启用'},
        {value: 1, label: '禁用'}
      ],
      // 性别选项
      sexOptions: [
        {label: "未知", value: 0},
        {label: "男", value: 1},
        {label: "女", value: 2}
      ],
      // 应用类型
      appTypeOptions: [
        {label: "未知", value: 0},
        {label: "小程序", value: 1},
        {label: "公众号", value: 2}
      ],
      // 订阅状态
      subscribeOptions: [
        {label: '取消关注', value: 0},
        {label: '已关注', value: 1}
      ],
      // 关注渠道
      subscribeSceneOptions: [
        {label: '公众号搜索', value: 'ADD_SCENE_SEARCH'},
        {label: '公众号迁移', value: 'ADD_SCENE_ACCOUNT_MIGRATION'},
        {label: '名片分享', value: 'ADD_SCENE_PROFILE_CARD'},
        {label: '扫描二维码', value: 'ADD_SCENE_QR_CODE'},
        {label: '图文页内名称点击', value: 'ADD_SCENE_PROFILE_LINK'},
        {label: '图文页右上角菜单', value: 'ADD_SCENE_PROFILE_ITEM'},
        {label: '支付后关注', value: 'ADD_SCENE_PAID'},
        {label: '其他', value: 'ADD_SCENE_OTHERS'}
      ]
    }
  },
  methods: {
    // 搜索按钮操作
    handleQuery() {
      this.queryForm.cursor = 1
      this._getWxUser()
    },
    // 获取用户列表
    _getWxUser() {
      pageWxUser(this.queryForm).then(({result: res}) => {
        this.total = res.total
        this.userList = res.records
      })
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.queryForm.deptId = undefined
      this.resetForm("queryForm")
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id);
      this.single = selection.length != 1;
      this.multiple = !selection.length;
    },
    // 表单重置
    reset() {
      this.form = this.$options.data().form
      this.resetForm("form");
    },
    //状态
    statusFormat(row, column) {
      return this.matchingLabel(this.statusOptions, row.status)
    },
    //应用类型
    appTypeFormat(row, column) {
      return this.matchingLabel(this.appTypeOptions, row.appType)
    },
    //订阅状态
    subscribeFormat(row, column) {
      return this.matchingLabel(this.subscribeOptions, row.subscribe)
    },
    //性别
    sexFormat(row, column) {
      return this.matchingLabel(this.sexOptions, row.sex)
    },
    //订阅方式
    subscribeSceneFormat(row, column) {
      return this.matchingLabel(this.subscribeSceneOptions, row.subscribeScene)
    },
    // 用户状态修改
    async handleStatusChange(row) {
      let text = row.status === 0 ? "启用" : "停用";
      const confirm = await this.$confirm('确认要' + text + ' "  ' + row.nickName + '  " 用户吗?', "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).catch(err => err)
      if (confirm != 'confirm') {
        row.status = row.status === 0 ? 1 : 0
        return this.$message.info('取消操作')
      }
      changeWxUserStatus(row.id, row.status).then((res) => {
        this.$message.success(text + "成功");
      }).catch(err => {
        row.status = row.status === 0 ? 1 : 0
      })
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const userId = row.id || this.ids;
      getWxUser(userId).then(({result: res}) => {
        this.form = res;
        this.open = true;
      })
    },
    /** 修改按钮操作 */
    handleUpdateRemark() {
      updateWxUserRemark(this.form.id, this.form.remark).then(res => {
        this.$message.success("修改成功")
        this.open = false;
      })
    },
    //同步微信用户
    handleSync() {
      this.loading = true
      syncWxUser().then(({result: res}) => {
        this._getWxUser()
        this.loading = false
      }).catch(err => {
        this.loading = false
      })
    },
    // 表格居中 (html中使用需要先声明)
    thStyleFun,
    // 表格居中 (html中使用需要先声明)
    cellStyleFun
  },
  created() {
    this.handleQuery();
  },
}
</script>

<style scoped>
/*微信头像大小132*132*/
.table-img {
  width: 33px;
  height: 33px;
}
</style>
